<template>
	<view class="page">
		<view>
			<text>身高</text>
			<input type="text" placeholder="请输入身高" class="">
			<text>cm</text>
		</view>
		<view class="xiantiao"></view>

		<view>
			<text>体重</text>
			<input type="text" placeholder="请输入体重" class="">
			<text>kg</text>
		</view>
		<view class="xiantiao"></view>
		<view>
			<text>日期</text>
			<view class="riqixuanze">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="riqi">{{date}}</view>
				</picker>
			</view>

			<view class="tupiangezi">
				<image src="/static/img/jiantouyou.png" mode=""></image>
			</view>
		</view>
		<button @click="save()">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: "2002-11-11",
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value
				console.log(this.date);
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			save() {
				uni.showToast({
					success: (res) => {
						uni.showToast({
							title: '成长记录保存成功',
							duration: 2000,
					
						}),
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/index/index'
							})
						},2000)	
					}
				})
			}
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.page view {
		display: flex;

		width: 100%;
		height: 65px;
	}

	.page .xiantiao {
		height: 0px;
		width: 100%;
		border-bottom: 1px solid gainsboro;
	}

	text {
		text-align: center;
		width: 20%;
		display: inline-block;
		height: 65px;
		line-height: 65px;
		font-size: 18px;
	}

	input {
		text-align: center;
		width: 60%;
		display: inline-block;
		height: 65px;
		line-height: 65px;
		font-size: 18px;
	}

	image {
		height: 15px;
		width: 15px;
		margin: auto;
	}

	.page .tupiangezi {
		height: 65px;
		width: 20%;
		display: flex;
	}

	.page .riqixuanze {
		display: inline-block;
		width: 60%;
		height: 65px;
		line-height: 65px;


	}

	.riqixuanze .riqi {
		display: flex;
		text-align: center;
		font-size: 17px;
		justify-content: space-around;
	}

	button {
		width: 90%;
		margin: 125% 5% 0 5%;
		border-radius: 20px;
		color: white;
		background-color: #666ee8;
	}
</style>
